.headBox {
  height: 5.08rem;
  position: relative;
}
.headBox .infoBox {
  z-index: 30;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #60A7F6;
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.headBox .infoBox .positionBox {
  width: 0.44rem;
  height: 0.44rem;
  background: url(../img/shouye/nav%20bar_icon_address.png) no-repeat center center;
  background-size: cover;
}
.headBox .infoBox .positionText {
  font-size: 0.28rem;
  color: #fff;
}
.headBox .infoBox .searchBox {
  width: 4.4rem;
  height: 0.6rem;
  border-radius: 0.3rem;
  background: url(../img/shouye/search%20bar_icon_search.png) no-repeat 0.24rem 0.13rem;
  position: relative;
  background-color: rgba(0, 0, 0, 0.45);
  background-size: cover;
  opacity: 0.24;
}
.headBox .infoBox .searchBox .searchInput {
  width: 3.68rem;
  height: 0.6rem;
  border: none;
  outline: none;
  background-color: #fff;
  color: #fff;
  border-radius: 0.3rem;
  position: absolute;
  padding-left: 0.72rem;
  font-size: 0.24rem;
}
.headBox .infoBox .cateBox {
  width: 0.44rem;
  height: 0.44rem;
  background: url(../img/shouye/nav%20bar_icon_classification.png) no-repeat center center;
  background-size: cover;
}
.headBox .infoBox .videoBox {
  width: 0.44rem;
  height: 0.44rem;
  background: url(../img/shouye/nav%20bar_icon_video.png) no-repeat center center;
  background-size: cover;
}
.funBox .funUl {
  height: 2.09rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.funBox .funUl li {
  font-size: 0.24rem;
  text-align: center;
}
.funBox .funUl li .funImg {
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 auto;
}
.funBox .funUl li .artImg {
  background: url(../img/shouye/home_icon_artistic%20creativity.png) no-repeat;
  background-size: cover;
}
.funBox .funUl li .liveImg {
  background: url(../img/shouye/home_icon_exhibition%20collection.png) no-repeat;
  background-size: cover;
}
.funBox .funUl li .exhibitImg {
  background: url(../img/shouye/home_icon_life%20shadow.png) no-repeat;
  background-size: cover;
}
.funBox .funUl li .inspirImg {
  background: url(../img/shouye/home_icon_work%20inspiration.png) no-repeat;
  background-size: cover;
}
.hotActivityBox {
  width: 6.9rem;
  height: 5.11rem;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0 0.1rem 0.2rem rgba(112, 144, 176, 0.1);
  opacity: 1;
  border-radius: 0.2rem;
}
.hotActivityBox .hotCenter {
  margin: 0 0.3rem;
}
.hotActivityBox .hotCenter .title {
  height: 1.32rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hotActivityBox .hotCenter .title .leftText .topTitle {
  display: flex;
}
.hotActivityBox .hotCenter .title .leftText .topTitle .recommend {
  font-size: 0.32rem;
  color: #1E2023;
}
.hotActivityBox .hotCenter .title .leftText .topTitle .hotLevel {
  display: flex;
  align-items: flex-end;
}
.hotActivityBox .hotCenter .title .leftText .topTitle .hotLevel .level {
  width: 0.08rem;
  margin-left: 0.04rem;
  border-radius: 0.04rem;
  background-color: #60A7F6;
}
.hotActivityBox .hotCenter .title .leftText .topTitle .hotLevel .blue_L {
  height: 0.32rem;
}
.hotActivityBox .hotCenter .title .leftText .topTitle .hotLevel .blue_M {
  height: 0.24rem;
}
.hotActivityBox .hotCenter .title .leftText .topTitle .hotLevel .blue_S {
  height: 0.18rem;
}
.hotActivityBox .hotCenter .title .leftText .activityContent {
  font-size: 0.24rem;
  color: #8A93A1;
  margin-top: 0.03rem;
}
.hotActivityBox .hotCenter .title .changeBox {
  display: flex;
}
.hotActivityBox .hotCenter .title .changeBox .changeImg {
  width: 0.36rem;
  height: 0.36rem;
  background: url(../img/shouye/popular%20activity%20recommendation_icon_change.png) no-repeat;
  background-size: cover;
}
.hotActivityBox .hotCenter .title .changeBox .changeText {
  font-size: 0.24rem;
  color: #AFBBCC;
}
.hotActivityBox .hotCenter .hotUl {
  display: flex;
  justify-content: space-around;
}
.hotActivityBox .hotCenter .hotUl li {
  display: flex;
  flex-direction: column;
}
.hotActivityBox .hotCenter .hotUl li .hotImg {
  width: 1.98rem;
  height: 2.73rem;
}
.hotActivityBox .hotCenter .hotUl li .activityName {
  font-size: 0.24rem;
  color: #1E2023;
  margin-top: 0.13rem;
}
.hotActivityBox .hotCenter .hotUl li .signCount {
  font-size: 0.18rem;
  color: #8A93A1;
  margin-top: 0.04rem;
}
.photoAndStory {
  margin-top: 0.72rem;
}
.photoAndStory .titleBox {
  width: 6.9rem;
  height: 0.54rem;
  margin: 0 auto;
  line-height: 0.54rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.photoAndStory .titleBox .leftBox {
  display: flex;
  align-items: center;
}
.photoAndStory .titleBox .leftBox .line {
  width: 8px;
  height: 40px;
  background: #60A7F6;
  border-radius: 0.04rem;
}
.photoAndStory .titleBox .leftBox .title {
  margin-left: 0.08rem;
  font-size: 0.36rem;
  color: #1E2023;
}
.photoAndStory .titleBox .lookMoreBox {
  display: flex;
  align-items: center;
}
.photoAndStory .titleBox .lookMoreBox .lookText {
  margin-right: 0.02rem;
  font-size: 0.24rem;
  color: #60A7F6;
}
.photoAndStory .titleBox .lookMoreBox .lookImg {
  width: 0.32rem;
  height: 0.32rem;
  background: url(../img/shouye/home_icon_more.png) no-repeat;
  background-size: cover;
}
.photoAndStory .storyUl {
  display: flex;
  overflow-x: scroll;
  margin-left: 0.3rem;
  margin-top: 0.24rem;
}
.photoAndStory .storyUl li {
  display: flex;
  flex-direction: column;
  margin-right: 0.18rem;
  flex-wrap: nowrap;
}
.photoAndStory .storyUl li .storyImg {
  width: 6.4rem;
  height: 3.6rem;
}
.photoAndStory .storyUl li .storyTitle {
  margin-top: 0.3rem;
  font-size: 0.28rem;
  color: #1E2023;
}
.photoAndStory .storyUl li .storyContent {
  margin-top: 0.2rem;
  font-size: 0.24rem;
  color: #8A93A1;
}
.photoAndStory .storyUl::-webkit-scrollbar {
  display: none;
}
.photoAndStory .bg {
  width: 6.9rem;
  height: 3.46rem;
  margin: 0 auto;
  margin-top: 0.41rem;
  background: url(../img/shouye/home_photo_operational%20banner.png) no-repeat;
  background-size: cover;
}
.popularPhoto {
  margin-top: 0.72rem;
}
.popularPhoto .titleBox {
  width: 6.9rem;
  height: 0.54rem;
  margin: 0 auto;
  line-height: 0.54rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popularPhoto .titleBox .leftBox {
  display: flex;
  align-items: center;
}
.popularPhoto .titleBox .leftBox .line {
  width: 8px;
  height: 40px;
  background: #60A7F6;
  border-radius: 0.04rem;
}
.popularPhoto .titleBox .leftBox .title {
  margin-left: 0.08rem;
  font-size: 0.36rem;
  color: #1E2023;
}
.popularPhoto .titleBox .lookMoreBox {
  display: flex;
  align-items: center;
}
.popularPhoto .titleBox .lookMoreBox .lookText {
  margin-right: 0.02rem;
  font-size: 0.24rem;
  color: #60A7F6;
}
.popularPhoto .titleBox .lookMoreBox .lookImg {
  width: 0.32rem;
  height: 0.32rem;
  background: url(../img/shouye/home_icon_more.png) no-repeat;
  background-size: cover;
}
.popularPhoto .photoUl {
  display: flex;
  width: 6.9rem;
  margin: 0 0.3rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 0.24rem;
}
.popularPhoto .photoUl .photoLi {
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  width: 3.36rem;
}
.popularPhoto .photoUl .photoLi .imgBox {
  position: relative;
  width: 3.36rem;
  height: 3.36rem;
}
.popularPhoto .photoUl .photoLi .imgBox .popularImg {
  width: 3.36rem;
  height: 3.36rem;
}
.popularPhoto .photoUl .photoLi .imgBox .countBox {
  position: absolute;
  bottom: 0.09rem;
  right: 0.07rem;
  height: 0.28rem;
  line-height: 0.28rem;
}
.popularPhoto .photoUl .photoLi .imgBox .countBox .countImg {
  width: 0.28rem;
  background: url(../img/shouye/home_icon_number%20of%20images.png) no-repeat;
  background-size: cover;
}
.popularPhoto .photoUl .photoLi .imgBox .countBox .count {
  font-size: 0.2rem;
  color: #fff;
}
.popularPhoto .photoUl .photoLi .photoTitle {
  font-size: 0.24rem;
  color: #1E2023;
  margin-top: 0.2rem;
}
.popularPhoto .photoUl .photoLi .labelUl {
  display: flex;
  margin-top: 0.18rem;
}
.popularPhoto .photoUl .photoLi .labelUl li {
  font-size: 0.18rem;
  padding: 0.02rem 0.1rem;
}
.popularPhoto .photoUl .photoLi .labelUl .blueLi {
  border: 0.01rem solid #60A7F6;
  color: #60A7F6;
}
.popularPhoto .photoUl .photoLi .labelUl .orangeLi {
  border: 0.01rem solid #FF9B38;
  color: #FF9B38;
}
.footBox {
  height: 0.98rem;
}
